import { useState } from 'react'
import { IconWidget } from '@inbiz/react'
import { RightOutlined } from '@ant-design/icons';
import { SizeInput } from '@inbiz/react-settings-form'
import ColorInput from "../ColorInput"
import './index.less'

const BoxshadowStyle = (props: any) => {
  const { value = '', onChange } = props
  const [showMore, $showMore] = useState<boolean>(false)
  const createBoxShadowConnector = (position: number) => {
    const splited = value.trim().split(' ')
    return {
      value: splited[position],
      onChange: (value: any) => {
        splited[position] = value
        onChange?.(`${splited[0] || ''} ${splited[1] || ''} ${splited[2] || ''} ${splited[3] || ''} ${splited[4] || ''}`)
      },
    }
  }
  return (
    <div className="inbiz-comp-boxshadow-style">
      <div className="line1">
        <RightOutlined onClick={() => $showMore((pre: boolean) => !pre)} style={{ transform: showMore ? 'rotate(90deg)' : 'rotate(0deg)' }} />
        <ColorInput
          isGetPopupContainer={true}
          {...createBoxShadowConnector(4)}
        />
      </div>
      <div className={showMore ? 'boxshadow-more boxshadow-more-show' : 'boxshadow-more'}>
        <div className='boxshadow-row'>
          <div className='boxshadow-col'>
            <IconWidget infer='AxisX' size={16} />
            <SizeInput
              exclude={['inherit', 'auto']}
              {...createBoxShadowConnector(0)}
            />
          </div>
          <div className='boxshadow-col'>
            <IconWidget infer='AxisY' size={16} style={{ marginLeft: 5 }} />
            <SizeInput
              exclude={['inherit', 'auto']}
              {...createBoxShadowConnector(1)}
            />
          </div>
        </div>
        <div className='boxshadow-row'>
          <div className='boxshadow-col'>
            <IconWidget infer='Blur' size={16} />
            <SizeInput
              exclude={['inherit', 'auto']}
              {...createBoxShadowConnector(2)}
            />
          </div>
          <div className='boxshadow-col'>
            <IconWidget infer='Shadow' size={16} style={{ marginLeft: 5 }} />
            <SizeInput
              exclude={['inherit', 'auto']}
              {...createBoxShadowConnector(3)}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default BoxshadowStyle